<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>资源指数分析系统</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body>
	<table>
		<tr>
			<div id="citySum"
				style=" position:absolute;left:0px;height: 400px;width:400px"></div>
		</tr>
		<tr>
			<div id="citySumSort"
				style=" position:absolute;left:400px;height: 400px;width:400px"></div>
		</tr>
			<div id="typeSum"
				style=" position:absolute;left:800px;height: 400px;width:400px"></div>
		<tr>
	</table>


	<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="static/js/jquery.min.js"></script>
	<script type="text/javascript"
		src="static/echarts/map/js/heilongjiang.js"></script>
	<script type="text/javascript">
		var dom1 = document.getElementById("citySum");
		var myChart = echarts.init(dom1);
		var dom2 = document.getElementById("citySumSort");
		var myChart2 = echarts.init(dom2);
		var dom3 = document.getElementById("typeSum");
		var myChart3 = echarts.init(dom3);
		option = null;
		myChart3.showLoading();
		
		function randomData() {
			return Math.round(Math.random() * 1000);
		}
	
		$.ajax({
			type : 'GET',
			url : 'instrument/citySum.ins',
			dataType : "json",
			success : function(data) {
				// [ '巴西', '印尼', '美国', '印度', '中国', '世界人口(万)' ]
				var y = "";
				// [ 18203, 23489, 29034, 104970, 131744, 630230 ]
				var x = "";
	
				for (var i = 0; i < data.length; i++) {
					if (i == 0) {
						x += "[" + data[i].value;
						y += "[\"" + data[i].name + "\"";
					} else if (i == data.length - 1) {
						x += "," + data[i].value + "]";
						y += ",\"" + data[i].name + "\"]";
					} else {
						x += "," + data[i].value;
						y += ",\"" + data[i].name + "\"";
					}
				}
				myChart.setOption({
					title : {
						text : '仪器各市分布',
						subtext : '',
						left : 'center'
					},
					tooltip : {
						trigger : 'item'
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : [ '仪器数量' ]
					},
					visualMap : {
						min : 0,
						max : 4500,
						left : 'left',
						top : 'bottom',
						text : [ '高', '低' ], // 文本，默认为数值文本
						calculable : true
					},
					toolbox : {
						show : true,
						orient : 'vertical',
						left : 'right',
						top : 'center',
						feature : {
							dataView : {
								readOnly : false
							},
							restore : {},
							saveAsImage : {}
						}
					},
					series : [
						{
							name : '仪器数量',
							type : 'map',
							mapType : '黑龙江',
							roam : false,
							label : {
								normal : {
									show : true
								},
								emphasis : {
									show : true
								}
							},
							data : data
						}
					]
				})
	
				myChart2.setOption({
					title : {
						text : '仪器各市分布排序',
						subtext : ''
					},
					tooltip : {
						trigger : 'axis',
						axisPointer : {
							type : 'shadow'
						}
					},
					legend : {
						data : [ '仪器数量' ]
					},
					grid : {
						left : '3%',
						right : '4%',
						bottom : '3%',
						containLabel : true
					},
					xAxis : {
						type : 'value',
						boundaryGap : [ 0, 0.01 ]
					},
					yAxis : {
						type : 'category',
						data : JSON.parse(y)
					},
					series : [
						{
							name : '仪器数量',
							type : 'bar',
							label : {
								normal : {
									show : true,
									position : 'right'
								}
							},
							data : JSON.parse(x)
						}
					]
				})
			},
			error : function(data) {
				alert("请检查网络连接");
			}
		});
		
		$.ajax({
			type : 'GET',
			url : 'instrument/typeSum.ins',
			dataType : "json",
			success : function(data) {
				myChart3.hideLoading();

			    function colorMappingChange(value) {
			        var levelOption = getLevelOption(value);
			        chart.setOption({
			            series: [{
			                levels: levelOption
			            }]
			        });
			    }
			
			    var formatUtil = echarts.format;
			
			    function getLevelOption() {
			        return [
			            {
			                itemStyle: {
			                    normal: {
			                        borderWidth: 0,
			                        gapWidth: 5
			                    }
			                }
			            },
			            {
			                itemStyle: {
			                    normal: {
			                        gapWidth: 1
			                    }
			                }
			            },
			            {
			                colorSaturation: [0.35, 0.5],
			                itemStyle: {
			                    normal: {
			                        gapWidth: 1,
			                        borderColorSaturation: 0.6
			                    }
			                }
			            }
			        ];
			    }
			
			    myChart3.setOption(option = {
			
			        title: {
			            text: '仪器类别占比',
			            left: 'center'
			        },
			
			        tooltip: {
			            // show : false
			            formatter: function (info) {
			                var value = info.value;
			                var treePathInfo = info.treePathInfo;
			                var treePath = [];
			
			                for (var i = 1; i < treePathInfo.length; i++) {
			                    treePath.push(treePathInfo[i].name);
			                }
			
			                return [
			                    '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>',
			                    '仪器数量: ' + formatUtil.addCommas(value) + '',
			                ].join('');
			            }
			        },
			
			        toolbox:{
			            show :false
			        },
			
			        series: [
			            {
			                name:'仪器类别占比',
			                type:'treemap',
			                roam : false,       // 关闭拖拽
			                //nodeClick : 'link',  // 关闭点击移动到点击点效果
			                visibleMin: 300,
			                label: {
			                    show: false,
			                    // formatter: '{b}'
			                },
			                itemStyle: {
			                    normal: {
			                        borderColor: '#fff'
			                    }
			                },
			                levels: getLevelOption(),
			                data: data
			            }
			        ]
			    })
			},
			error : function(data) {
				alert("请检查网络连接");
			}
		})
	</script>
</body>
</html>
